<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>文章编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
	<script src="../js/vue/config.js"></script>
    <script src="../js/vue/vue.min.js"></script>
    <!-- 富文本编辑器 -->
	<link rel="stylesheet" href="../css/kindeditor/themes/default/default.css"/>
	<script charset="utf-8" src="../css/kindeditor/kindeditor-min.js"></script>
	<script charset="utf-8" src="../css/kindeditor/lang/zh_CN.js"></script>
</head>
<script>
    var url = document.location.toString();
    var arrUrl = url.split("=");
    var para = arrUrl[1];
</script>
<body class="hold-transition skin-red sidebar-mini" >
<div id="app">
            <!-- 正文区域 -->
            <section class="content">

                <div class="box-body">

                    <!--tab页-->
                    <div class="nav-tabs-custom">

                        <!--tab头-->
                        <ul class="nav nav-tabs">                       		
                            <li class="active">
                                <a href="#home" data-toggle="tab">文章编辑</a>
                            </li>

                        </ul>
                        <!--tab头/-->
						
                        <!--tab内容-->
                        <div class="tab-content">

                            <!--表单内容-->
                            <div class="tab-pane active" id="home">
                                <div class="row data-type">
									   <div class="col-md-2 title">标题</div>
									   <div class="col-md-10 data">
										   <input type="text" class="form-control" id="title"
                                                  name="title" placeholder="限定20个字，多的不会显示"
                                                  v-model="title">
									   </div>

									   <div class="col-md-2 title">价格</div>
									   <div class="col-md-10 data">
										   <div class="input-group">
											   <span class="input-group-addon">¥</span>
											   <input type="text" class="form-control" id="price" name="price" placeholder="价格,单位为分，不能传入小数" v-model="price">
										   </div>
									   </div>
									   <div class="col-md-10 data editer">
										   <textarea name="text" id="content" style="width:100%;height:400px;visibility:hidden;" ></textarea>
									   </div>

                                </div>
                            </div>
                        </div>
                        <!--tab内容/-->
						<!--表单内容/-->
                    </div>
                   </div>
                  <div class="btn-toolbar list-toolbar">
				      <button class="btn btn-primary" onclick="postData()"><i class="fa fa-save"></i>保存</button>
				      <button class="btn btn-default" onclick="window.location.href='article.html'">返回列表</button>
				  </div>
            </section>
        </div>
</body>
            <!-- 正文区域 /-->
<script type="text/javascript">
	var editor;
	KindEditor.ready(function(K) {
		editor = K.create('#content', {
			allowFileManager : true,
			uploadJson: serverUrl+'/newsUpload/upload.do'
			// fileManagerJson : '../jsp/file_manager_json.jsp'
		});
	});
	var vm = new Vue({
        el:'#app',
        data:{
            title:"",
            text:"",
            price:""
        }
    });
	if (para == null) {
    }else {
        $.ajax({
            url:serverUrl+'/article/findById.do',
            type:'GET',
            data:{
                id:para
            },
            dataType:'json',
            success:function(err){
                console.log(err);
                // alert(JSON.stringify(data));
                vm.title = err.title;// 设置HTML内容
                editor.html(err.text);
                vm.price = err.price;
            },
            error:function (studs) {
                // alert(JSON.stringify(data));
                vm.title = studs.title;// 设置HTML内容
                editor.html(studs.text);
                vm.price = studs.price;
            }
        })
	}
    function postData(){
	    if (para != null) {
            $.ajax({
                url:serverUrl+'/article/update.do',
                type:'POST',
                data:{
                    id:para,
                    title: vm.title,
                    text: editor.html(),
                    price: vm.price
                },
                dataType:'json',
                success:function (data) {
                    if (data.code == 100) {
                        alert("修改成功");
                        window.close();
                    }else {
                        alert("请核对各项数据是否过长")
                    }
                },
                error:function (studs) {
                    alert("请仔细检查数据")
                }
            })
        }else {
            $.ajax({
                url:serverUrl+'/article/insert.do',
                type:'POST',
                data:{
                    title: vm.title,
                    text: editor.html(),
                    price: vm.price
                },
                dataType:'json',
                success:function (data) {
                    if (data.code == 100) {
                        alert("新增成功");
                        window.location.href='article.html';
                    }else {
                        alert("请核对各项数据是否过长")
                    }
                },
                error:function (studs) {
                    alert("请仔细检查数据")
                }
            })
        }
    }
</script>
</body>
</html>